<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('统计')" />
</head>
<style>
	.ibox-content table>thead>tr>th,
	.ibox-content table>tbody>tr>th,
	.ibox-content table>thead>tr>td,
	.ibox-content table>tbody>tr>td
	{
		border-bottom: 1px solid #e7eaec!important;
		 background-color: transparent;
		 border: 0px;
	}
	.ibox-content .table-bordered {
		border: 0;
	}
	.pagination-detail,
	.fixed-table-toolbar,
	.pagination{display: none}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">

	<div class="row">
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-success pull-right">日</span>
					<h5>会员</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" id="memberscount">0</h1>
					<div class="stat-percent font-bold text-navy">
						<span id="membersAmount">0</span> <i class="fa fa-level-up"></i>
					</div>
					<small>新会员</small>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<span class="label label-info pull-right">全年</span>
					<h5>订单</h5>
				</div>
				<div class="ibox-content">
					<h1 class="no-margins" id="indentcount">0</h1>
					<div class="stat-percent font-bold text-info">
						<span id="orderAmount">0</span> <i class="fa fa-level-up"></i>
					</div>
					<small>新订单</small>
				</div>
			</div>
		</div>
	</div>


	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title ">
					<h5>最新订单</h5>
					<div class="ibox-tools">
						<span class="label btn label-success btn-success" onclick="rechargePage()" shiro:hasPermission="operator:order:recharge">
							<i class="fa fa-plus"></i> 充值
						</span>
						<span class="label btn label-warning btn-warning" onclick="expensePage()" shiro:hasPermission="operator:order:expense">
							<i class="fa fa-minus"></i> 消费
						</span>
					</div>
				</div>
				<div class="ibox-content">
					<table id="bootstrap-table"></table>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<!--<script th:src="@{/js/jquery.min.js}"></script>-->
<!--<script th:src="@{/js/bootstrap.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>-->

<!--<th:block th:include="include :: sparkline-js" />-->
<th:block th:include="include :: footer" />
<script th:inline="javascript">

	var orderTypeDATA = [[${@dict.getType('t_order_type')}]];
	var prefix = ctx + "operator/order";

	$(document).ready(function () {



		$.post(prefix + '/summarizing', null, function(result) {
			if (result.code==0){
				var summarizing = result.data
				console.log(summarizing)
				$("#membersAmount").html(summarizing.membersAmount)
				$("#memberscount").html(summarizing.memberscount)
				$("#orderAmount").html(summarizing.orderAmount)
				$("#indentcount").html(summarizing.indentcount)
			}
		});


		var options = {
			url: prefix + "/list",
			method: 'post',
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			bordered: true,
			sortName: "createTime",
			sortOrder: "desc",
			pageSize: 10,
			pageNumber: 1,
			pageList: [],
			columns: [
				{
					field: 'createTime',
					title: '时间'
				},
				{
					field: 'behalfType',
					title: '类型',
					formatter: function (value, row, index) {
						return $.table.selectDictLabel(orderTypeDATA, value);
					}
				},
				{
					field: 'consumeAmount',
					title: '金额',
					formatter: function (value, row, index) {
						if(row.behalfType=='C'){
							return '<span class="text-navy">'+value+' <i class="fa fa-level-up"></i></span>'
						} else {
							return '<span style="color: red">' + value + '</span>';
						}
					}
				}
			]
		};
		$.table.init(options);
		// $('#bootstrap-table').bootstrapTable(options);


		var data2 = [
			[gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
			[gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
			[gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
			[gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
			[gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
			[gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
			[gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
			[gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
		];

		var data3 = [
			[gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
			[gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
			[gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
			[gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
			[gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
			[gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
			[gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
			[gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
		];


		var dataset = [
			{
				label: "订单数",
				data: data3,
				color: "#1ab394",
				bars: {
					show: true,
					align: "center",
					barWidth: 24 * 60 * 60 * 600,
					lineWidth: 0
				}

			}, {
				label: "付款数",
				data: data2,
				yaxis: 2,
				color: "#464f88",
				lines: {
					lineWidth: 1,
					show: true,
					fill: true,
					fillColor: {
						colors: [{
							opacity: 0.2
						}, {
							opacity: 0.2
						}]
					}
				},
				splines: {
					show: false,
					tension: 0.6,
					lineWidth: 1,
					fill: 0.1
				},
			}
		];


		var options = {
			xaxis: {
				mode: "time",
				tickSize: [3, "day"],
				tickLength: 0,
				axisLabel: "Date",
				axisLabelUseCanvas: true,
				axisLabelFontSizePixels: 12,
				axisLabelFontFamily: 'Arial',
				axisLabelPadding: 10,
				color: "#838383"
			},
			yaxes: [{
				position: "left",
				max: 1070,
				color: "#838383",
				axisLabelUseCanvas: true,
				axisLabelFontSizePixels: 12,
				axisLabelFontFamily: 'Arial',
				axisLabelPadding: 3
			}, {
				position: "right",
				clolor: "#838383",
				axisLabelUseCanvas: true,
				axisLabelFontSizePixels: 12,
				axisLabelFontFamily: ' Arial',
				axisLabelPadding: 67
			}
			],
			legend: {
				noColumns: 1,
				labelBoxBorderColor: "#000000",
				position: "nw"
			},
			grid: {
				hoverable: false,
				borderWidth: 0,
				color: '#838383'
			}
		};

		function gd(year, month, day) {
			return new Date(year, month - 1, day).getTime();
		}

		var previousPoint = null,
				previousLabel = null;

		// $.plot($("#flot-dashboard-chart"), dataset, options);


	});


	function expensePage() {
		$.modal.open("会员消费",  prefix + "/expense");
	}

	function rechargePage() {
		$.modal.open("会员充值",  prefix + "/recharge/");
	}
</script>
</body>
</html>
